<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/wenzhentongji.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../JavaScript/Highcharts-9.3.2/code/highcharts.js"></script>

    <title>Document</title>
</head>

<body>
    <div class="kong11"></div>
    <div id="mulu">
        <p>首页/数据统计/问诊统计</p>
        <p>问诊统计</p>
        <div></div>
    </div>
    </div>
    <div id="department">
        <div>
            <p class="p1">各科室的销售收入</p>
            <div id="depm" class="bian">本月</div>
            <div id="depq" class="bian">本季度</div>
            <div id="depy" class="bian">本年</div>
            <input type="date">至<input type="date">
        </div>
        <div id="dep_mouth">

        </div>
        <div id="dep_quarter">

        </div>
        <div id="dep_year">

        </div>
    </div>
    <div id="disease_income">
        <p class="p1">各疾病的销售收入</p>
        <div id="disease"></div>
    </div>
    <div id="region" class="row">
        <p class="p1">各地区问诊情况</p>
        <table class="col-md-6" id='table1'>
            <thead>
                <tr>
                    <th>地区</th>
                    <th>问题数</th>
                    <th>销售收入</th>
                </tr>
            </thead>
        </table>
        <table class="col-md-6" id='table2'>
            <thead>
                <tr>
                    <th>地区</th>
                    <th>问题数</th>
                    <th>销售收入</th>
                </tr>
            </thead>
        </table>
    </div>

    <div>
        <span class="foot1">大健康综合管理后台</span>
        <span class="foot2">版权所有:@大健康综合(集团)有限公司Meinian Onehealth Healthcare (Group)Co.</span>
        <span class="foot2">沪ICP备09017846号-3沪公网安备31010602006448号</span>
    </div>

    <script src="../JavaScript/index.js"></script>
    <script src="../JavaScript/data.js"></script>
    <script src="./JavaScript/utils.js"></script>
    <script>
        $(function () {
            $('#dep_mouth').highcharts({
                colors: ['#1890FF', '#36CBCB'],
                chart: {
                    type: 'column'
                },
                xAxis: {
                    categories: ['皮肤科', '妇产科', '男科', '儿科', '中医科', '内科', '外科', '眼科', '口腔科', '骨科', '传染科', '体检科']
                },
                credits: {
                    enabled: true
                },
                series: [{
                    name: '图文问诊',
                    data: [200, 113, 102, 250, 310, 140, 203, 220, 241, 374, 110, 283]
                }, {
                    name: '电话问诊',
                    data: [201, 100, 146, 174, 330, 110, 270, 123, 128, 123, 330, 289]
                }
                ]
            });
            $('#dep_quarter').highcharts({
                colors: ['#1890FF', '#36CBCB'],
                chart: {
                    type: 'column'
                },
                xAxis: {
                    categories: ['皮肤科', '妇产科', '男科', '儿科', '中医科', '内科', '外科', '眼科', '口腔科', '骨科', '传染科', '体检科']
                },
                credits: {
                    enabled: true
                },
                series: [{
                    name: '图文问诊',
                    data: [210, 133, 142, 252, 110, 240, 103, 320, 141, 274, 180, 203]
                }, {
                    name: '电话问诊',
                    data: [221, 140, 128, 171, 360, 190, 370, 153, 178, 193, 310, 200]
                }
                ]
            });
            $('#dep_year').highcharts({
                colors: ['#1890FF', '#36CBCB'],
                chart: {
                    type: 'column'
                },
                xAxis: {
                    categories: ['皮肤科', '妇产科', '男科', '儿科', '中医科', '内科', '外科', '眼科', '口腔科', '骨科', '传染科', '体检科']
                },
                credits: {
                    enabled: true
                },
                series: [{
                    name: '图文问诊',
                    data: [100, 123, 172, 290, 310, 110, 243, 270, 231, 124, 240, 273]
                }, {
                    name: '电话问诊',
                    data: [251, 150, 296, 244, 330, 210, 250, 123, 168, 173, 250, 279]
                }
                ]
            });

            var chart = Highcharts.chart('disease', {
                colors: ['#36CBCB', '#1890FF'],
                chart: {
                    type: 'bar'
                },
                xAxis: {
                    categories: ['白癜风', '皮肤瘙痒', '湿疹', '荨麻疹', '色素痣', '心血管', '高血压']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '水果消费总量'
                    }
                },
                legend: {
                    reversed: true
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                series: [{
                    name: '图文问诊',
                    data: [1500, 3222, 2702, 3222, 2562, 3682, 2922]
                }, {
                    name: '电话问诊',
                    data: [2633, 1222, 3122, 2892, 1241, 2722, 3602]
                }]
            });
        });
        $('#depm').click(function () {
            $('#dep_mouth').css({
                display: "block"
            })
            $('#dep_quarter').css({
                display: "none"
            })
            $('#dep_year').css({
                display: "none"
            })
        })
        $('#depq').click(function () {
            $('#dep_quarter').css({
                display: "block"
            })
            $('#dep_mouth').css({
                display: "none"
            })
            $('#dep_year').css({
                display: "none"
            })
        })
        $('#depy').click(function () {
            $('#dep_year').css({
                display: "block"
            })
            $('#dep_mouth').css({
                display: "none"
            })
            $('#dep_quarter').css({
                display: "none"
            })
        })
        $('.bian').click(function () {
            $('.bian').css({
                backgroundColor: 'white',
                color: 'black',
            })
            $(this).css({
                backgroundColor: '#1890FF',
                color: 'white',
            })
            console.log(123)
        })
        var compare = function (prop) {
            return function (obj1, obj2) {
                var val1 = obj1[prop];
                var val2 = obj2[prop];
                if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
                    val1 = Number(val1);
                    val2 = Number(val2);
                }
                if (val1 > val2) {
                    return -1;
                } else if (val1 < val2) {
                    return 1;
                } else {
                    return 0;
                }
            }
        }
        let sales_data = region.sort(compare('sales'))
        for (var i = 0; i < 15; i++) {
            $('#table1').append(`
                <tr>
                    <td>${sales_data[i].area}</td>
                    <td>${sales_data[i].Question_number}</td>
                    <td>${sales_data[i].sales}</td>
                </tr>
            `)
        }
        for (var i = 15; i < 30; i++) {
            $('#table2').append(`
                <tr>
                    <td>${sales_data[i].area}</td>
                    <td>${sales_data[i].Question_number}</td>
                    <td>${sales_data[i].sales}</td>
                </tr>
            `)
        } 
    </script>
</body>

</html>